<template>
  <div class="home">
    <!-- 头部 -->
    <NavigationBar isHome></NavigationBar>
    <!-- 轮播 -->
    <van-swipe class="swipe" :autoplay="3000" :duration="1000" indicator-color="#000">
      <van-swipe-item v-for="(item,index) in banner" :key="index">
        <RouterLink :to="{name:'details',params:{id:item.content}}">
          <img class="bannerImg" v-lazy="item.background_image"/>
        </RouterLink>
      </van-swipe-item>
    </van-swipe>
    <!-- 分类 -->
    <ul class="classiFication">
      <li v-for="(item,index) in classiFication" :key="index">
        <router-link :to="{name:'productList',params:{id:item.id}}">
          <img v-lazy="item.background_image" alt="">
          <p>{{ item.title }}</p>
        </router-link>
      </li>
    </ul>
    <!-- 营销 -->
    <ul class="marketing">
      <li v-for="(item,index) in marketing" :key="index">
        <router-link to="">
          <img v-lazy="item.background_image" alt="">
        </router-link>
      </li>
    </ul>
    <!-- 商品卡片 -->
    <div class="goodsCardList">
      <div class="goodsCard" v-for="(item,index) in goodsCard" :key="index">
        <RouterLink :to="{name:'details',params:{id:item.content}}">
          <img v-lazy="item.background_image" alt="">
          <div class="productDesc">
            <p class="title" :style="{color:JSON.parse(item.extra).color==1?'#fff':''}">{{ item.title }}</p>
            <p class="subTitle" :style="{color:JSON.parse(item.extra).color==1?'#fff':''}">{{ item.sub_title }}</p>
            <p class="desc" :style="{color:JSON.parse(item.extra).color==1?'#fff':''}">{{
                JSON.parse(item.extra).description
              }}</p>
          </div>
          <div class="info">
            <div class="price">售价 ￥<span>{{ item.product.current_price }}</span></div>
            <div class="buy">查看</div>
          </div>
        </RouterLink>
      </div>
    </div>
    <!-- 新品测评 -->
    <div class="news-container">
      <h2>新品评测</h2>
      <div class="view" v-for="(item,index) in newsContainer" :key="index">
        <RouterLink to="">
          <img v-lazy="item.background_image" alt="">
          <h3>{{ item.title }}</h3>
          <p>{{ item.content }}</p>
        </RouterLink>
      </div>
    </div>
    <!-- 配件系列 -->
    <div class="accessories">
      <h2>配件系列</h2>
      <div class="box">
        <div class="item" v-for="(item,index) in accessories" :key="index">
          <RouterLink :to="{name:'details',params:{id:item.content}}">
            <h3>{{ item.title }}</h3>
            <img v-lazy="item.background_image" alt="">
          </RouterLink>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      // 轮播
      banner: [],
      // 分类
      classiFication: [],
      // 营销
      marketing: [],
      // 商品卡片
      goodsCard: [],
      // 新品测评
      newsContainer: [],
      // 配件系列
      accessories: []
    }
  },
// 侦听器
  watch: {},
// 计算属性
  computed: {},
// 事件
  methods: {},
// 生命周期
  created() {
  },
  mounted() {
    this.$ajax.homeData().then(res => {
      // console.log(res)
      if (res.error_code === 0) {
        this.banner = res.data.banner.items
        // console.log("轮播图", this.banner)
        this.classiFication = res.data.category.items
        // console.log("分类", this.classiFication)
        this.marketing = res.data.activity_temp.items
        // console.log("营销", this.marketing)
        this.goodsCard = res.data.goods_card.items
        // console.log("商品卡片", this.goodsCard)
        this.newsContainer = res.data.content.items
        // console.log("新品测评", this.newsContainer)
        this.accessories = res.data.recommend_part.items
        // console.log("配件系列", this.accessories)
      } else {
        this.$toast(res.error_msg)
      }


    })
  }
}
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  background-color: #f5f5f5;
  // 轮播图
  .swipe {
    .bannerImg {
      width: 100%;
    }

    ::v-deep.van-swipe__indicators {
      bottom: 10px;

      .van-swipe__indicator {
        margin-right: 8px;
        width: 8px;
        height: 8px;
        cursor: pointer;
        transition-property: background-color;
        transition-timing-function: ease;
        background: rgba(0, 0, 0, .3);
        border-radius: 50%;
      }

      .van-swipe__indicator--active {
        background-color: #000;
      }
    }
  }

  // 分类
  .classiFication {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    padding: 0 20px;
    box-sizing: border-box;
    width: 100%;
    margin-bottom: 20px;
    margin-top: 40px;

    li {
      width: calc(100% / 3 - 14px);

      a {
        display: flex;
        align-items: center;
        flex-direction: column;

        img {
          width: 100px;
          height: 100px;
        }

        p {
          color: #4a4a4a;
          font-size: 16px;
          margin-top: 20px;
          width: 100%;
          text-align: center;
        }
      }
    }
  }

  // 营销
  .marketing {
    width: 100%;
    overflow-x: auto;
    display: flex;
    padding: 20px 20px 0;

    li {
      flex: none;
      height: 158px;
      width: 85.5vw;
      border-radius: 20px;
      overflow: hidden;
      margin-right: 10px;

      a {
        img {
          width: 100%;
          height: 100%;
        }
      }
    }

    li:last-child {
      margin: 0;
    }
  }

  // 商品卡片
  .goodsCardList {
    padding: 0 20px;

    .goodsCard {
      position: relative;
      width: 100%;
      margin-top: 20px;
      background-color: #fff;
      border-radius: 20px;
      overflow: hidden;

      img {
        width: 100%;
      }

      .productDesc {
        position: absolute;
        top: 20px;
        width: 100%;
        left: 0;
        padding: 0 20px;
        box-sizing: border-box;

        .title {
          font-size: 18px;
          padding-bottom: 8px;
          width: 100%;
          color: rgba(0, 0, 0, .6);
        }

        .subTitle {
          font-size: 28px;
          padding-bottom: 20px;
          width: 100%;
          font-family: HarmonyOSHansMedium;
          color: #4a4a4a;
        }

        .desc {
          color: #4a4a4a;
          font-size: 14px;
          width: 100%;
          line-height: 1.5em;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;
          overflow: hidden;
          font-family: HarmonyOSHansRegular;
        }
      }

      .info {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px;
        font-size: 16px;
        color: #4a4a4a;

        .buy {
          color: #4a8aff;
          padding: 6px 20px;
          font-size: 12px;
          background-color: #eee;
          border-radius: 15px;
        }
      }
    }
  }

  // 新品测评
  .news-container {
    width: 100%;
    padding: 20px 20px 0;


    h2 {
      font-size: 30px;
      color: #4d4d4d;
      padding: 20px 0;
      font-family: HarmonyOSHansMedium;
    }

    .view {
      img {
        width: 100%;
        height: 240px;
        object-fit: cover;
        border-radius: 10px;
      }

      h3 {
        margin-top: 20px;
        width: 100%;
        color: #4a4a4a;
        font-size: 16px;
        margin-bottom: 6px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }

      p {
        color: #7e7f84;
        font-size: 12px;
        white-space: normal;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
    }
  }

  // 配件系列
  .accessories {
    width: 100%;
    padding: 20px;


    h2 {
      font-size: 30px;
      color: #4d4d4d;
      padding: 20px 0;
      font-family: HarmonyOSHansMedium;
    }

    .box {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      .item {
        width: 48%;
        background-color: #fff;
        border-radius: 10px;
        box-sizing: border-box;
        margin-bottom: 15px;
        min-height: 230px;
        padding-bottom: 10px;


        a {
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          img {
            width: 100%;
          }

          h3 {
            color: #4a4a4a;
            font-size: 16px;
            padding: 0 15px;
            margin-top: 20px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;

          }
        }

      }
    }
  }
}
</style>